A simple custom widget with db backend

In this tutorial, you’ll learn how-to create a database driven custom Magento 2.0 widget. It takes you through step by step creation of all necessary php, xml and template files…

Files involved:

1. Installation file: app/code/Vendorname/Dbwidget/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendorname_Dbwidget',
    __DIR__
);

2. Module setup file: app/code/Vendorname/Dbwidget/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendorname_Dbwidget" setup_version="1.0.0" />
</config>

3. Route setup file: app/code/Vendorname/Dbwidget/etc/frontend/routes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="pinamondo_newsletter" frontName="newsletter_ajax">
            <module name="Vendorname_Dbwidget" />
        </route>
    </router>
</config>

4.1 Db installation file: app/code/Vendorname/Dbwidget/Setup/InstallSchema.php

<?php
 
namespace Vendorname\Dbwidget\Setup;
 
use Magento\Framework\Setup\InstallSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
use Magento\Framework\DB\Ddl\Table;
 
class InstallSchema implements InstallSchemaInterface
{
    /**
     * Installs DB schema for a module
     *
     * @param SchemaSetupInterface $setup
     * @param ModuleContextInterface $context
     * @return void
     */
    public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
    {
        $installer = $setup;
 
        $installer-&gt;startSetup();
 
        $table = $installer-&gt;getConnection()
            -&gt;newTable($installer-&gt;getTable('vendorname_dbwidget'))
            -&gt;addColumn('id', Table::TYPE_INTEGER, null, ['identity' =&gt; true, 'nullable' =&gt; false, 'primary' =&gt; true])
            -&gt;addColumn('email', Table::TYPE_TEXT, 255, ['nullable' =&gt; true, 'default' =&gt; null])
            -&gt;addColumn('name', Table::TYPE_TEXT, 255, ['nullable' =&gt; true, 'default' =&gt; null])
            -&gt;addIndex($installer-&gt;getIdxName('pm_nwlt_email_idx', ['email']), ['email'])
            -&gt;setComment('Dbwidget table');
 
        $installer-&gt;getConnection()-&gt;createTable($table);
 
        $installer-&gt;endSetup();
    }
}

4.2 Db upgrade file (optional): app/code/Vendorname/Dbwidget/Setup/UpgradeSchema.php

<?php
 
namespace Vendorname\Dbwidget\Setup;
 
use Magento\Framework\Setup\UpgradeSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
use Magento\Framework\DB\Ddl\Table;
 
class UpgradeSchema implements UpgradeSchemaInterface
{
    /**
     * Updates DB schema for a module
     * Adding Link to Magento Customer
     *
     * @param SchemaSetupInterface $setup
     * @param ModuleContextInterface $context
     * @return void
     */
    public function upgrade(SchemaSetupInterface $setup, ModuleContextInterface $context)
    {
        $installer = $setup;
 
        $installer-&gt;startSetup();
 
        $installer-&gt;getConnection()-&gt;addColumn(
            $installer-&gt;getTable('vendorname_dbwidget'),
            'customer_id',
            array(
                'type' =&gt; Table::TYPE_INTEGER,
                'nullable' =&gt; true,
                'default' =&gt; '0',
                'comment' =&gt; 'Customer'
            )
        );
 
        $installer-&gt;endSetup();
    }
}

5.1 Db Resource Model file: app/code/Vendorname/Dbwidget/Model/Resource/Dbwidget.php

<?php
 
namespace Vendorname\Dbwidget\Model\Resource;
 
use Magento\Framework\Model\ResourceModel\Db\AbstractDb;
 
class Dbwidget extends AbstractDb
{
    /**
     * Define main table
     */
    protected function _construct()
    {
        $this->_init('vendorname_dbwidget', 'id');
    }
}

5.2 Db Model file: app/code/Vendorname/Dbwidget/Model/Dbwidget.php

<?php
 
namespace Vendorname\Dbwidget\Model;
 
use Magento\Framework\Model\AbstractModel;
 
class Dbwidget extends AbstractModel
{
    /**
     * Define resource model
     */
    protected function _construct()
    {
        $this->_init('Vendorname\Dbwidget\Model\Resource\Dbwidget');
    }
}

5.3 Db Model Collection file: app/code/Vendorname/Dbwidget/Model/Resource/Dbwidget/Collection.php

<?php
 
namespace Vendorname\Dbwidget\Model\Resource\Newsletter;
 
use Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection;
 
class Collection extends AbstractCollection
{
    /**
     * Define model &amp; resource model
     */
    protected function _construct()
    {
        $this->_init(
            'Vendorname\Dbwidget\Model\Dbwidget',
            'Vendorname\Dbwidget\Model\Resource\Dbwidget'
        );
    }
}

6 Create a layout file: app/code/Vendorname/Dbwidget/view/frontend/layout/default.xml

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="main.content">
            <block class="Magento\Framework\View\Element\Template" name="tutorial_example_block"
                   template="Vendorname_Dbwidget::dbwidget.phtml" />
        </referenceContainer>
    </body>
</page>

7 Create an index controller file: app/code/Vendorname/Dbwidget/Controller/Index/Index.php

<?php
 
namespace Vendorname\Dbwidget\Controller\Index;
 
use \Magento\Framework\App\Action\Action;
 
class Index extends Action
{
    /**
     * @var  \Magento\Framework\View\Result\Page
     */
    protected $resultPageFactory;
 
    /**
     * @param \Magento\Framework\App\Action\Context $context
     */
    public function __construct(\Magento\Framework\App\Action\Context $context,
                                    \Magento\Framework\View\Result\PageFactory $resultPageFactory)
    {
        parent::__construct($context);
        $this->resultPageFactory = $resultPageFactory;
    }
 
    public function execute()
    {
        $resultPageFactory = $this->resultPageFactory->create();
 
        // Add page title
        $resultPageFactory->getConfig()->getTitle()->set(__('Example module'));
 
        // Add breadcrumb
        /** @var \Magento\Theme\Block\Html\Breadcrumbs */
        $breadcrumbs = $resultPageFactory->getLayout()->getBlock('breadcrumbs');
 
 
        return $resultPageFactory;
    }
}

Leave a Reply